<template>
  <div class="contain">

    <div id="BOX">

      <div class="BOX_inside" id="BOX_inside_left"></div>

      <div class="BOX_inside" id="BOX_inside_right">
        <rollingLogoVue @click="Adminir" class="rl" />
        <LoginBox />
      </div>

    </div>
    <BUG v-if="BUGLOGOvisiable"></BUG>
    <!-- <button @click="testAxios">Axios</button> -->
  </div>
</template>

<script setup>
import { onUpdated, onMounted, ref, onBeforeUnmount } from "vue";
import { useRouter } from "vue-router";
import rollingLogoVue from "../components/icons/rollingLogo.vue";
import LoginBox from "../components/LoginBox.vue";
import BUG from "../components/icons/bug.vue";
import { post } from "../api/axios";

const router = useRouter();
const BUGLOGOvisiable = ref(true);
onMounted(() => {
  if (window.innerWidth < 800) {
    BUGLOGOvisiable.value = false
  }
  Adminir()
})


window.onresize = () => {
  if (window.innerWidth < 800) {
    BUGLOGOvisiable.value = false
  } else {
    BUGLOGOvisiable.value = true
  }
}

const testAxios = () => {
  post('/checkSession')
}

async function Adminir() {
  await router.push('/')
}

//销毁监听器
onBeforeUnmount(() => {
  window.onresize = null
})

</script>

<style scoped>
.contain {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rl {
  position: absolute;
  top: 10px;
  left: 10px;

}

#BOX {
  height: 500px;
  width: 800px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  box-shadow: 1px 1px 10px 5px white;
  animation: change 5s ease infinite;
}

.BOX_inside {
  width: 50%;
  height: 100%;
}

#BOX_inside_left {
  background-color: var(--right-yellow);
}

#BOX_inside_right {
  background-color: var(--left-black);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@keyframes change {
  0% {
    box-shadow: 1px 1px 10px 5px white;
  }

  25% {
    box-shadow: 1px 1px 10px 5px pink;
  }

  50% {
    box-shadow: 1px 1px 10px 5px skyblue;
  }

  75% {
    box-shadow: 1px 1px 10px 5px green;
  }

  100% {
    box-shadow: 1px 1px 10px 5px white;
  }
}

@media screen and (max-width: 800px) {
  #BOX {
    width: 90vw;
  }

  .BOX_inside {
    width: 100%;
    height: 100%;
  }

  #BOX_inside_left {
    width: 0px;
    height: 0px;
  }

}
</style>